<template>
    <div class="content">
        <div class="wave-wrapper"></div>






    </div>
</template>

<script setup>
    import { ref,onMounted} from 'vue';


    onMounted(() => {

    })





</script>

<style scoped>
    .content{
        width: 100%;
        height: 100%;
    }

    .wave-wrapper {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

    .wave-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle, #551715 10%, transparent 10.01%),
        radial-gradient(circle, #552311 10%, transparent 10.01%);
        background-size: 40px 40px;
        background-position: 0 0;
        animation: wave 5s linear infinite;
        z-index: 1;
    }
    @keyframes wave {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 40px 40px;
        }
    }




</style>